<template>
  <div>
	  <div>
		  <div style="margin:2% 0;display: inline-block;">
			<span>视频标题：</span>
			<el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入视频标题" v-model="title"></el-input>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询</el-button>
			<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置</el-button>
			<el-button size="mini" style="margin-left: 10px;" :disabled="!isAuth('competvideo:add')" type="primary" icon="document" @click="addNotice">添加赛事视频</el-button>
		  </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="typeDatas.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	     </el-table-column>
		 <el-table-column
			prop="coverImg"
			label="封面图">
				<template slot-scope="scope">
					<img :src="scope.row.coverImg" alt="" width="100" height="50">
				</template>
		</el-table-column>
		<el-table-column
			prop="url"
			label="视频">
		<template slot-scope="scope">
			<video :src="scope.row.url" class="avatar" controls="controls" style="width:160px;height:70px;">您的浏览器不支持视频播放</video>
		</template>
		</el-table-column>
		<el-table-column
	  	prop="title"
	  	label="视频标题">
	    </el-table-column>

      <el-table-column
        prop="coverImg"
        label="标题图标">
        <template slot-scope="scope">
          <img :src="scope.row.titleImg" alt="" width="100">
        </template>
      </el-table-column>
		<el-table-column
		prop="view"
		label="播放量">
		</el-table-column>
		<el-table-column
			prop="status"
			label="状态">
			<template slot-scope="scope">
				<span v-if="scope.row.status == 1">开启</span>
				<span v-if="scope.row.status == 2">关闭</span>
			</template>
		</el-table-column>
	    <el-table-column
	  	prop="createTime"
	  	label="创建时间">
	    </el-table-column>
	    <el-table-column
	      label="操作"
	  	width="220">
	      <template slot-scope="scope">
			  <el-button
			    size="mini"
			    type="primary"
			    @click="comment(scope.row)">评论
			  </el-button>
	        <el-button
	          size="mini"
	          type="primary"
			  :disabled="!isAuth('competvideo:update')"
	          @click="updates(scope.$index, scope.row)">修改
	        </el-button>
	        <el-button
	          size="mini"
	          type="danger"
			  :disabled="!isAuth('competvideo:delete')"
	          @click="deletes(scope.row)">删除
	        </el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="typeDatas.totalElements">
	    </el-pagination>
	  </div>
	  <!-- 添加分视频-->
	  <el-dialog title="添加视频" :visible.sync="dialogFormVisible" center>
		<div style="margin-bottom: 10px;display:flex;">
			<span style="width: 200px;display: inline-block;text-align: right;">封面图：</span>
			<div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
				<el-upload
					class="avatar-uploader"
					v-model="coverImg"
					action="https://admin.koudaidj.com/game/alioss/upload"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					>
					<img v-if="coverImg" :src="coverImg" class="avatar" style="border-radius: 6px;width: 140px;height: 140px;"/>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</div>
		<div style="margin-bottom: 10px;display:flex;">
			<span style="width: 200px;display: inline-block;text-align: right;">视频：</span>
			<div style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
				<el-upload
					class="avatar-uploader"
					v-model="url"
					accept=".mp4"
					:before-upload="beforeUploadVideo"
					action="https://admin.koudaidj.com/game/alioss/upload"
					:show-file-list="false"
					:on-success="handleAvatarSuccess3"
					>
					<video v-if="url" :src="url" class="avatar" controls="controls" style="width: 200px;height:148px;">您的浏览器不支持视频播放</video>
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">视频标题：</span>
			<el-input style="width:50%;" v-model="title" placeholder="请输入视频标题"></el-input>
		</div>
      <div style="margin-bottom: 10px;display:flex;">
        <span style="width: 200px;display: inline-block;text-align: right;">标题图标：</span>
        <div style=" width:148px;height:60px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
          <el-upload
            class="avatar-uploader"
            style="line-height: 60px"
            v-model="titleImg"
            action="https://admin.koudaidj.com/game/alioss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess5"
          >
            <img v-if="titleImg" :src="titleImg" class="avatar" style="border-radius: 6px;width: 140px;height: 60px;"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">游戏名称：</span>
			<el-select v-model="gameTypeId" class="margin15" placeholder="请选择游戏" style="width:200px;" @change="select">
				<el-option v-for="(item,index) in gameTypeIds" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">播放量：</span>
			<el-input style="width:50%;" v-model="view" placeholder="请输入播放量"></el-input>
		</div>
		<div style="margin-bottom: 10px;">
			<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
			<el-radio-group v-model="status">
			    <el-radio :label="1">开启</el-radio>
			    <el-radio :label="2">关闭</el-radio>
			</el-radio-group>
		</div>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible = false">取 消</el-button>
	      <el-button type="primary" @click="releasNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
	  <!-- 修改视频 -->
	  <el-dialog title="修改视频" :visible.sync="dialogFormVisible1" center>
	  	<el-form :model="form">
		  <el-form-item label="封面图：" :label-width="formLabelWidth" >
		  	<div style=" width:140px;height:140px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
		  		<el-upload
		  			class="avatar-uploader"
		  			v-model="form.coverImg"
		  			action="https://admin.koudaidj.com/game/alioss/upload"
		  			:show-file-list="false"
		  			:on-success="handleAvatarSuccess2"
		  			>
		  			<img v-if="form.coverImg" :src="form.coverImg" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
		  			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  		</el-upload>
		  	</div>
		  </el-form-item>
		  <el-form-item label="视频：" :label-width="formLabelWidth" >
		  	<div style=" width:140px;height:140px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
		  		<el-upload
		  			class="avatar-uploader"
		  			v-model="form.url"
		  			action="https://admin.koudaidj.com/game/alioss/upload"
		  			:show-file-list="false"
		  			:on-success="handleAvatarSuccess1"
		  			>
					<video v-if="form.url" :src="form.url" class="avatar" controls="controls" style="width: 200px;height:148px;">您的浏览器不支持视频播放</video>
		  			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  		</el-upload>
		  	</div>
		  </el-form-item>
		  <el-form-item label="视频标题：" :label-width="formLabelWidth" >
		    <el-input v-model="form.title" style="width:65%;" placeholder="请输入视频标题"></el-input>
		  </el-form-item>
      <el-form-item label="标题图标：" :label-width="formLabelWidth" >
        <div style=" width:140px;height:60px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
          <el-upload
            class="avatar-uploader"
            style="line-height: 60px"
            v-model="form.titleImg"
            action="https://admin.koudaidj.com/game/alioss/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess4"
          >
            <img v-if="form.titleImg" :src="form.titleImg" class="avatar" style="border-radius: 6px;width: 148px;height: 60px;"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>

		  <el-form-item label="游戏名称：" :label-width="formLabelWidth" >
			   <el-select v-model="form.gameTypeId" class="margin15" placeholder="请选择游戏" style="width:200px;" @change="select">
				<el-option v-for="(item,index) in gameTypeIds" :key="item.index" :label="item.label" :value="item.value">
				</el-option>
			   </el-select>
		  </el-form-item>
		  <el-form-item label="播放量：" :label-width="formLabelWidth" >
		    <el-input v-model="form.view" style="width:65%;" placeholder="请输入播放量"></el-input>
		  </el-form-item>
		  <el-form-item label="状态：" :label-width="formLabelWidth" >
		   <el-radio-group v-model="form.status">
		       <el-radio :label="1">开启</el-radio>
		       <el-radio :label="2">关闭</el-radio>
		   </el-radio-group>
		  </el-form-item>
	  	</el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
	      <el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:5,
				page:1,
				title:'',
				coverImg:'',
        titleImg:'',
				status:'',
				url:'',
				view:'',
				form:{
					id:'',
					title:'',
					coverImg:'',
          titleImg:'',
					view:'',
					status:'',
					url:'',
					gameTypeId:'',
					createTime:''
				},
				gameTypeId:'',
				gameTypeIds:[],
				formLabelWidth:'200px',
				tableDataLoading:false,
				dialogFormVisible1:false,
				dialogFormVisible:false,
				typeDatas:[],
			}
		},
		methods: {
			// 图标上传
			handleAvatarSuccess(file) {
			    this.coverImg = file.data;
			},
			beforeUploadVideo(file) {
				var fileSize = file.size / 1024 / 1024 < 50;
				if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
					layer.msg("请上传正确的视频格式");
					return false;
				}
				if (!fileSize) {
					layer.msg("视频大小不能超过50MB");
					return false;
				}
			},
			// 视频
			handleAvatarSuccess3(file){
				this.url = file.data;
			},
			beforeUploadVideo(file) {
				console.log(file)
			    const isLt10M = file.size / 1024 / 1024  < 10;
			    if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
			        this.$message.error('请上传正确的视频格式');
			        return false;
			    }
			    if (!isLt10M) {
			        this.$message.error('上传视频大小不能超过10MB哦!');
			        return false;
			    }
			},
			// 封面上传
			handleAvatarSuccess2(file) {
			     this.form.coverImg = file.data;
			},
			// 标题图标上传
      handleAvatarSuccess4(file) {
			     this.form.titleImg = file.data;
			},
			// 标题图标上传
      handleAvatarSuccess5(file) {
			     this.titleImg = file.data;
			},
			// 视频上传
			handleAvatarSuccess1(file) {
			     this.form.url = file.data;
			},
			handleChange(value) {
				this.value.forEach(element => {
					this.parentId = element;
				});
			},
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 查询
			select(){
				this.page = 1
				this.size = 10
				this.dataSelect()
			},
			// 重置
			cleans(){
				this.title = ''
				this.dataSelect()
			},
			// 视频评论
			comment(row){
				this.$router.push({path: '/comment', query: {gameVideoId: row.id}})
			},
			// 添加视频弹框
			addNotice(){
				this.dialogFormVisible = true
			},
			// 添加视频
			releasNoticeTo(){
				if (this.coverImg == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传视频封面图',
				        type: 'warning'
				    });
				    return
				}
				if (this.url == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请上传视频',
				        type: 'warning'
				    });
				    return
				}
				if (this.title == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入视频标题',
				        type: 'warning'
				    });
				    return
				}
				if (this.view == '') {
				    this.$notify({
				        title: '提示',
				        duration: 1800,
				        message: '请输入播放量',
				        type: 'warning'
				    });
				    return
				}
				this.$http({
				  url: this.$http.adornUrl2('/gameVideo/save'),
				  method: 'post',
				  data: this.$http.adornData({
					'title':this.title,
					'coverImg':this.coverImg,
					'view':this.view,
					'url':this.url,
					'status':this.status,
					'gameTypeId':this.gameTypeId,
					'titleImg':this.titleImg
				  })
				}).then(({data}) => {
					this.dialogFormVisible = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						this.title = ''
						this.coverImg = ''
						this.titleImg = ''
						this.url =
						this.view = ''
						this.status = 1
				        this.dataSelect()
				      }
				    })
				})
			},
			// 修改弹框
			updates(index,rows){
				this.dialogFormVisible1=true;
				this.form.id = rows.id;
				this.form.title = rows.title;
				this.form.coverImg = rows.coverImg;
				this.form.status = rows.status;
				this.form.view = rows.view;
				this.form.url = rows.url;
				this.form.gameTypeId = rows.gameTypeId;
				this.form.coverImg = rows.coverImg
				this.form.createTime = rows.createTime
				this.form.titleImg = rows.titleImg
			},
			// 修改视频
			amendNoticeTo(){
				this.$http({
				  url: this.$http.adornUrl2('/gameVideo/update'),
				  method: 'post',
				  data: this.$http.adornData({
					'id':this.form.id,
					'title': this.form.title,
					'coverImg': this.form.coverImg,
					'url': this.form.url,
					'status': this.form.status,
					'view': this.form.view,
					'gameTypeId':this.form.gameTypeId,
					'createTime':this.form.createTime,
					'titleImg':this.form.titleImg
				  })
				}).then(({data}) => {
					this.dialogFormVisible1 = false
				    this.$message({
				      message: '操作成功',
				      type: 'success',
				      duration: 1500,
				      onClose: () => {
						  this.dataSelect()
				      }
				    })
				})
			},
			// 删除视频
			deletes(row){
				this.$confirm(`确定删除此条信息?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
					url: this.$http.adornUrl2('/gameVideo/delete'),
					method: 'get',
					params: this.$http.adornParams({
						'id':row.id
					})
				  }).then(({data}) => {
					  this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						  this.dataSelect()
						}
					  })
				  })
				}).catch(() => {})
			},
			// 获取游戏分类
			gameClass(){
				this.$http({
				  url: this.$http.adornUrl2('/gameType/result'),
				  method: 'get',
				  params: this.$http.adornParams({
				  })
				}).then(({data}) => {
				  this.tableDataLoading = false
				  let returnData = data.data
				  this.gameTypeIds = returnData
				})
			},
			// 获取视频数据
			dataSelect () {
			  let page = this.page - 1
			  this.tableDataLoading = true
			  this.$http({
				url: this.$http.adornUrl2('/gameVideo/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page':page,
					'size':this.size,
					'title':this.title
				})
			  }).then(({data}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.typeDatas = returnData
			  })
			}
		},
		mounted() {
			this.dataSelect()
			this.gameClass()
		}
	  };
</script>

<style>

</style>
